<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css" rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="/static/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
            {% block head %}
            {% endblock %} 
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-layout1-header">
            <nav>
                <div class="king-header2 navbar navbar-blue  f14">
                    <div class="nav-container">
                        <div class="navbar-header">
                            <button class="pull-right visible-xs navbar-toggle collapsed navbar-toggle-sm" type="button" data-toggle="collapse" data-target="#king-header2-navbar-collapse"> <i class="fa fa-fw fa-ellipsis-v">                    </i> </button>
                        </div>
                        <div class="navbar-collapse collapse" id="king-header2-navbar-collapse">
                            <ul class="nav navbar-nav navbar-left hidden-sm">
                                <li class="open">
                                    <a href="javascript:void(0);">
                                        <span>天一运维平台</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <span>自定义</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <span>自定义</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-cog">                            </i>
                                        <span class="ml10"> 管理配置 </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span> admin </span>
                                        <span class="avatar">
                                            <img src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav9/images/avatar.jpg"> </span>
                                    </a>
                                </li>
                                <li> <a href="javascript:void(0)">                            退出                        </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="king-layout1-main clearfix">
            <!-- sidebar start -->
            <div class="king-layout1-sidebar" style="width:216px;">
                <nav style="min-width: auto; z-index: 0;" class="king-vertical-nav5   ">
                    <ul class="sidebar">
                        <li class="sidebar-main"> <a href="{%url 'index'%}">首页 <span class="menu-icon glyphicon glyphicon-home"></span>                </a> </li>
                        <li class="sidebar-title">
                            <a style="color: #333">
                                <span>主机管理</span>
                            </a>
                            <ul class="sidebar">
                                <li class="sidebar-item active"> <a href="{%url 'servernav'%}">主机管理 <span class="menu-icon fa fa-tasks"></span></a> </li>
                                <li class="sidebar-item"> <a href="">主机导入<span class="menu-icon fa fa-tasks"></span></a> </li>
                                <li class="sidebar-item"> <a href="">主机导出<span class="menu-icon fa fa-tasks"></span></a> </li>
                                <li class="sidebar-item"> <a href="">远程连接<span class="menu-icon fa fa-tasks"></span></a> </li>
                            </ul>
                        </li>
                        <li class="sidebar-title">
                            <a style="color: #333">
                                <span>任务调度</span>
                            </a>
                            <ul class="sidebar">
                                <li class="sidebar-item"> <a href="{%url 'showscript'%}">脚本清单 <span class="menu-icon fa fa-gear"></span></a> </li>
                                <li class="sidebar-item"> <a href="{%url 'runscript'%}">执行脚本 <span class="menu-icon fa fa-gear"></span></a> </li>
                                <li class="sidebar-item"> <a href="javascript:;">定时任务 <span class="menu-icon fa fa-gear"></span></a> </li>
                                <li class="sidebar-item"> <a href="javascript:;">历史记录 <span class="menu-icon fa fa-gear"></span></a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- sidebar end -->
            <!-- content start -->
            <div class="king-content-wrap">
                <div class="king-layout1-content" style="margin-left: 216px;">
                    <div class="container-fluid text-center">
                    {% block content %}
                    {% endblock %} 
                    </div>  
                </div>
            </div>
            <!-- content end -->
        </div>
    </div>
<!--
    <script>
        $(function(){
                function renderTpl(str, cfg) {
                    var re = /(#(.+?)#)/g;

                    return str.replace(re, function() {
                        var val = cfg[arguments[2]]+'';
                        if(typeof val == 'undefined') {
                            val = '';
                        }
                        return val;
                    });
                }

                // 异步请求后台数据
                $.ajax({
                    url: 'https://magicbox.bk.tencent.com/static_api/v3/components/table7/data.json',
                    type: 'GET',
                    success: function(res){
                        var _html = ' ';
                        var list = res.items;
                        var tpl = $('#tpl_16036089598052').html();
                        var headerTpl =  $('#header_tpl_16036089598052').html();
                        for (var i=0,len=list.length; i < len; i++){
                            var item = list[i];
                            _html += renderTpl(tpl, item)
                        }
                        $('.ranger-box2 tbody').html(_html);
                        $('.ranger-box2 thead').html(renderTpl(headerTpl,res.catalogues));
                    }
                });
            });
    </script>
-->
</body>

</html>